/**
*选择岗位
*/
<template>
    <vp-dialog ref="editDialogRef" :span="2">
        <template #title>
            <vp-label zh="选择岗位" en="Select Position" align="left" />
        </template>
        <vp-card shadow="hover" class="mb5">
            <el-form label-suffix=":" ref="searchFormRef" :model="searchForm" @submit.prevent
                @keyup.enter="loadDataList" label-width="120px">
                <vp-search-row>
                    <vp-search-col :span="2">
                        <el-form-item prop="keyword">
                            <template #label><vp-label-keyword /></template>
                            <el-input v-model="searchForm.keyword" v-trim placeholder=""></el-input>
                        </el-form-item>
                    </vp-search-col>
                    <vp-search-col btn-col>
                        <vp-btn-search :loading="loading" @click="loadDataList" />
                        <vp-btn-reset @click="handleSearchReset" />
                    </vp-search-col>
                </vp-search-row>
            </el-form>
        </vp-card>
        <vp-card v-loading="loading">
            <vp-table :data="tableData" @selection-change="handleSelectionChange" @row-click="handleRowClick"
                @sort-change="handleSortChange" @current-change="handleCurrentChange" ref="multipleTable"
                highlight-current-row stripe border style="width: 100%" row-key="id">
                <el-table-column type="selection" :reserve-selection="true" align="center" width="55" />
                <el-table-column align="center" label="#" type="index"></el-table-column>
                <el-table-column prop="bh" show-overflow-tooltip>
                    <template #header><vp-label zh="编号" en="Number" /></template>
                </el-table-column>
                <el-table-column prop="mc" show-overflow-tooltip>
                    <template #header><vp-label zh="名称" en="Name" /></template>
                </el-table-column>
                <el-table-column prop="sqlx" show-overflow-tooltip>
                    <template #header><vp-label zh="授权类型" en="Department" /></template>
                    <template #default="scope">
                        {{ scope.row.sqlx == 10 ? '部件/Part' : scope.row.sqlx == 20 ? 'NDT/NDT' : scope.row.sqlx == 30 ?
        '其他/Other' : '' }}
                    </template>
                </el-table-column>
            </vp-table>
            <div style="float: right;padding-top: 8px;padding-bottom: 8px;">
                <el-popover placement="top-end" :width="400" trigger="click">
                    <template #reference>
                        <el-badge :value="multipleSelection.length" type="info">
                            <vp-btn-selected></vp-btn-selected>
                        </el-badge>
                    </template>
                    <el-table :data="multipleSelection" border stripe max-height="500" row-key="id">
                        <el-table-column prop="mc">
                            <template #header><vp-label zh="岗位" en=" Pos." /></template>
                        </el-table-column>
                        <el-table-column width="90">
                            <template #header><vp-label-operations /></template>
                            <template #default="{ row }">
                                <vp-btn-del text @click="handleSelectedDelete(row)" />
                            </template>
                        </el-table-column>
                    </el-table>
                </el-popover>
            </div>
            <el-pagination background class="mt5" layout="prev, pager, next, total" :total="page.total"
                v-model:currentPage="page.pageNum" v-model:pageSize="page.pageSize" :hide-on-single-page="false">
            </el-pagination>
        </vp-card>
        <template #footer>
            <vp-btn-empty @click="handleClear" />
            <vp-btn-confirm @click="handleSave" />
        </template>
    </vp-dialog>
</template>

<script setup lang="ts" name="VpPositionDialog">
import { defineComponent, reactive, ref, toRefs, watch } from 'vue';
import request from '/@/utils/request';
import { DEFAULT_PAGE } from '/@/utils/page';

const searchForm = ref({
    keyword: "",
});

const searchFormRef = ref();

const page = reactive({
    ...DEFAULT_PAGE,
});
const multipleSelection = ref([])

const tableData = ref([]);
const loading = ref(false);
const callback = ref((data: any) => { });

const multipleTable = ref();
const editDialogRef = ref();
const currentRow = ref({});
const selectedId = ref("");

const handleOpen = (param: any) => {
    editDialogRef.value.handleOpen();
    multipleSelection.value = []
    currentRow.value = {};

    if (param.callback && typeof param.callback === "function") {
        callback.value = param.callback;
    }
    loadDataList();
}

watch(() => page.pageNum, () => {
    loadDataList();
})

const loadDataList = () => {
    loading.value = true;
    request.get('/training/position/openList', {
        params: {
            ...searchForm.value,
            ...page,
        }
    }).then(res => {
        tableData.value = res?.data?.list || [];
        page.total = res?.data?.total || 0;
        page.pageNum = res?.data?.pageNum || 1;
        // const currentRow = tableData.value.find((obj: any) => { return obj.id === selectedId.value });
        // if (currentRow) {
        //     singlelTable.value.setCurrentRow(currentRow);
        // }
    }).finally(() => {
        loading.value = false;
    })
}

const handleCurrentChange = (val: any) => {
    currentRow.value = val;
}

const handleRowClick = (row: any) => {
    multipleTable.value.toggleRowSelection(row);
}

const handleSave = () => {
    if (loading.value) {
        return;
    }
    callback.value(multipleSelection.value);
    editDialogRef.value.handleClose();
}
const handleClear = () => {
    if (loading.value) {
        return;
    }
    callback.value({ id: "", bh: '', mc: "", sqlx: null });
    editDialogRef.value.handleClose();
}

const handleClose = (tag: any) => {
    multipleTable.value.toggleRowSelection(tag, false);
}

const handleSelectionChange = (val: any) => {
    multipleSelection.value = val;
}

const handleSelectedDelete = (row: any) => {
    multipleTable.value.toggleRowSelection(row, false);
}

defineExpose({
    handleOpen
})
</script>
